.van-process-record {
  padding: 0 16px;
  min-height: 100px;
  overflow: scroll;

  &__card {
    box-sizing: border-box;
    border-radius: 4px;

    margin-bottom: 8px;
    padding: 12px 16px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    font-size: 14px;
    background: #FFFFFF;

    border: 0.5px solid #E5E5E5;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);

    &:last-child {
      margin-bottom: 0;
    }

    &-line {
      display: flex;
      flex-direction: row;
      gap: 8px;
    }

    &-label {
      width: 70px;
      text-align: right;
      color: #999999;
      flex-shrink: 0;

      &::after {
        content: "：";
      }
    }

    &-content {
      flex: 1;
      text-align: left;

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      > span.approve {
        padding: 2px 8px;
        color: #26BD71;
        background: rgba(38, 189, 113, 0.1);
      }

      > span.reject {
        padding: 2px 8px;
        color: #F24957;
        background: rgba(242, 73, 87, 0.1);
      }
    }
  }

  &__timeline {

    .van-process-record__card {
      margin: 0;
      border: none;
      box-shadow: none;
      background: none;
      padding: 0 16px;

      &-title {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        text-align: left;
      }

      &-label {
        text-align: left;
        &::after {
          content: "";
        }
      }
    }
  }

  &__timeline-more {
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #3377FF;

    &::after{
      content: "";
      // 倒三角形
      display: inline-block;
      transform: translateY(2px);
      width: 0;
      height: 0;
      border-width: 5px;
      border-style: solid;
      border-color: #3377FF transparent transparent transparent;
      margin-left: 4px;
    }
  }

  &__timeline-noMore {
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #999999;
  }
}
